<template>
  <div>
    <MainContent title="客户管理">
      <template #search-bar>
        <SearchBar inline>
          <template #normal>
            <el-form-item label="ID">
              <el-input v-model="tableForm.userId" clearable placeholder="请输入ID"></el-input>
            </el-form-item>
            <el-form-item label="客户ID">
              <el-input v-model="tableForm.unionId" clearable placeholder="请输入客户ID"></el-input>
            </el-form-item>

            <el-form-item label="手机号">
              <el-input v-model="tableForm.phone" clearable placeholder="请输入手机号"></el-input>
            </el-form-item>
            <!--            <ins-cascader-filter-->
            <!--              @change="(value) => (tableForm.queryInsIds = value)"-->
            <!--            ></ins-cascader-filter>-->
          </template>
          <template #toolbar>
            <el-form-item>
              <el-button type="primary" @click="onSearch">查询</el-button>
              <!-- TODO 加权限 -->
              <el-button type="primary" @click="showExportData = true">导出</el-button>
            </el-form-item>
          </template>
        </SearchBar>
      </template>
      <LayoutTable ref="customerClient" url="/user/userEntity/pageList" :param="tableForm">
        <el-table-column prop="id" label="ID" min-width="100"></el-table-column>
        <el-table-column prop="phone" label="手机号" min-width="120"> </el-table-column>
        <!-- <el-table-column prop="realName" label="姓名" min-width="100"></el-table-column> -->

        <!--
        <el-table-column prop="headerImg" label="头像" min-width="100">
          <template #default="scope">
            <div class="list-cover">
              <el-avatar
                shape="square"
                :size="40"
                fit="fit"
                :src="scope.row.headerImg"
              />
            </div>
          </template>
        </el-table-column> -->

        <!-- <el-table-column
          prop="nickName"
          label="用户昵称"
          min-width="100"
        ></el-table-column> -->
        <el-table-column prop="createTime" label="注册时间" min-width="170">
          <template #default="scope">
            <div>
              {{ $filters.dateFormat(scope.row.createTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="unionId" label="客户ID" min-width="100"></el-table-column>
        <el-table-column label="操作" fixed="right" width="130" v-has="['120302', '120305']">
          <template #default="scope">
            <div>
              <!-- <el-button @click="del(scope.row)" link type="primary" v-has="['120301']"
                >删除</el-button
              > -->
              <el-button @click="toDetail(scope.row)"
                link type="primary" v-has="['120302']">详情</el-button>
              <el-button @click="addintegraClick(scope.row)" link type="primary" v-has="['120305']">修改积分</el-button>
            </div>
          </template>
        </el-table-column>
      </LayoutTable>
    </MainContent>
    <Add-Integral @cancel="cancel" @confirm="confirm" :showDialog="dataDialog.addIntegralDialog"
      :modelData="modelData"></Add-Integral>
    <exportData v-model:show-dialog="showExportData" :search-data="tableForm" title="客户管理" export-type="userInfoExport">
    </exportData>
  </div>
</template>
<script>
import CustomerApi from "@/api/customerApi";
import AddIntegral from "./component/addIntegral.vue";
import store from "@/store";
import exportData from "@/components/exportData/exportData.vue";
export default {
  name: 'CustomerClient',
  components: { AddIntegral, exportData },
  data() {
    return {
      showExportData: false,
      modelData: {},
      dataDialog: {
        addIntegralDialog: false,
      },
      formData: {},
      tableForm: {
        userId: "",
        unionId: "",
        phone: "",
        queryInsIds: [],
      },
    };
  },
  methods: {
    //查看详情
    toDetail(row){
      //存储当前客户信息
      sessionStorage.removeItem('currentCustomer')
      sessionStorage.setItem('currentCustomer',JSON.stringify(row))
this.$router.push(`/merchant/customerCenter/customerClient/customerContent/${row.id}`)
    },
    // 删除客户
    async delUser(row) {
      let rs = await CustomerApi.delUser({ id: row.id, name: row.nickName });
      if (rs.code == 200) {
        ElMessage.success("删除客户成功");
        this.onSearch();
      }
    },
    del(row) {
      this.$confirm("此操作将删除该客户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delUser(row);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    resetForm() {
      this.tableForm = {
        nickName: "",
      };
      this.onSearch();
    },
    // closeExport(val, close) {
    //   this.isExport = val;
    //   if (!close) {
    //     this.onSearch();
    //   }
    // },
    addintegraClick(row) {
      console.log("[ row ]", row);
      this.modelData = row;
      this.dataDialog.addIntegralDialog = true;
    },
    confirm() {
      this.onSearch();
    },
    cancel(type) {
      this.dataDialog[type] = false;
    },
    onSearch() {
      this.$nextTick(() => {
        this.$refs.customerClient.search();
      });
    },
  },
  watch: {
    "tableForm.nickName": {
      handler(val) {
        this.onSearch();
      },
    },
    insId: {
      handler(val) {
        this.onSearch();
      },
      deep: true
    },
  },
  computed: {
    insId() {
      return store.state.insId.insId;
    },
  }
};
</script>

<style lang="scss" scoped>
.list-cover {
  width: 50px;
  height: 50px;
  padding-top: 5px;
}
</style>
